{include file="common/header"/}
<div class="lemo-container">
    <div class="lemo-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>轮播图列表</legend>
            <blockquote class="layui-elem-quote">
                <div class="tabletop">
                    <div class="layui-inline">
                        <!--                        <label class="layui-form-label">搜索{:lang('username')}</label>-->
                        <div class="layui-input-inline">
                            <input type="text" name="keys" id="keys" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <button type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="" id="search">
                            {:lang('search')}
                        </button>
                        <!-- <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger"
                            data-href="{:url('delete')}" id="delAll">{:lang('delete checked')}</a> -->
                        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-warm add"
                           data-href="{:url('add')}" id="add">添加轮播图</a>
                    </div>

                </div>
            </blockquote>
        </fieldset>
        <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
</div>

<script type="text/html" id="action">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-href="{:url('del')}?id={{d.id}}">{:lang('del')}</a>
    <a class="layui-btn layui-btn-success layui-btn-xs" lay-event="edit" data-href="{:url('edit')}?id={{d.id}}">{:lang('edit')}</a>
</script>
<script type="text/html" id="create_time">
    {{layui.util.toDateString(d.create_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
</script>

{include file="common/footer"/}
<script>
    var tableIn = null;
    layui.config({
        base: "/static/admin/js/",
        version: true
    }).extend({
        Admin: 'Admin'
    }).use(['table', 'Admin'], function () {
        var table = layui.table,
        $ = layui.$;
        tableIn = table.render({
            elem: '#list',
            url: '{:url("index")}',
            method: 'post',
            cols: [[
                // {checkbox: true, fixed: 'left'},
                {field: '', title: 'ID', width: 80, sort: true, type: 'numbers'},
                {field: 'title', title: '标题', width: 150, sort: true},
                {
                    field: 'image', title: '图片', width: 150, align: 'center',
                    templet: function (d) {
                        return '<div ><img src="' + d.image + '" alt="" width="50px" height="50px" onclick="showBigImage(this)"></a></div>';
                    }
                },
                {field: 'url', title: '跳转地址', width: 150, templet: '#size'},
                {field: 'create_time', title: '时间', width: 180, templet: '#create_time'},
                {title: '操作', width: 200, toolbar: '#action', align: "center", fixed: 'right'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
        });
    });

    /**
     * @param e 图片对象
     */
    function showBigImage(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }


</script>